<template>
  <div class="cart_dialog" @click="up">
    <div class="wrap">
      <div class="goods">
        <img src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/161/fe69644b-04e6-46c5-8e3b-f750db9ef1e7_720x909_70.jpg" alt="">
        <div class="detail">
          <div class="price">￥45</div>
          <div class="des">库存101000件</div>
          <div class="des">请选择颜色分类</div>
        </div>
      </div>
      <div class="produce_size">
        <div class="size_title">尺码</div>
        <div class="size_content">
          <div class="size_item" :class="activeIndex == index ? 'size_item_on' : ''"
               v-for="(item,index) in ['S','M','L','XL']" :key="index" @click="sizeItemClick(index)">{{item}}
          </div>
        </div>
      </div>
      <div class="produce_size color">
        <div class="size_title">颜色</div>
        <div class="size_content">
          <div class="size_item" :class="indexcolor == index ? 'size_item_on' : ''"
               v-for="(item,index) in ['红色','白色','黄色','黑色']" :key="index" @click="colorItemClick(index)">{{item}}
          </div>
        </div>
      </div>
      <div class="buy">
        <span class="fl">购买数量</span>
        <div id="modifyNumDom" class="num_wrap">
          <span class="minus" :class="{disabled:minus1==true}" @click="f_minus()">-</span>
          <input class="num" type="tel" v-model="input_val">
          <span class="plus" @click="plus()">+</span>
        </div>
      </div>
      <div class="bar">
        <button @click="btn_ok()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        input_val: 1,
        minus1:false,
        tag1:false,
        activeIndex:1,
        indexcolor:1,
        // buy:'',

      }
    },
    props: ['buy'],

    methods:{
      up () {
        var btn = document.querySelector('.wrap')
        if (btn) {
          if (!btn.contains(event.target)) {
            this.$emit('upup','false');
          }
        }
      },
      f_minus () {
        this.input_val--
        if (this.input_val < 1) {
          this.minus1=true;
          this.input_val = 1
        }
      },
      btn_ok(){
        this.$router.push({path: '/my'});
      },
      plus () {
        this.input_val++
      },
      sizeItemClick (idx) {
        this.activeIndex = idx
      },
      // yanse点击
      colorItemClick (idx) {
        this.indexcolor = idx
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../style/common";
  @import "../../../style/mixin";

  .cart_dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    .wrap {
      border-top-left-radius: 0.2rem;
      border-top-right-radius: 0.2rem;
      background: #fff;
      bottom: 0;
      left: 0;
      height: 70%;
      width: 100%;
      position: absolute;
      .goods {
        width: 5rem;
        height: 3rem;
        position: absolute;
        left: 0.5rem;
        top: -0.8rem;
        text-align: left;
        img {
          width: 2.3rem;
          height: 2.3rem;
          border: 2px solid #fff;
          float: left;
        }
        .detail {
          float: left;
          margin-left: 0.5rem;
          margin-top: 1.2rem;
          .price {
            color: $bc2;
            height: 0.4rem;
            font-size: 0.3rem
          }
          .des {
            font-size: 0.26rem;
            height: 0.4rem;
          }
        }
      }
      // 尺码
      .produce_size {
        padding: 0 0.23rem;
        margin-top: 2rem;
        text-align: left;
        display: inline-block;
        width: 100%;
        .size_title {
          font-size: 0.26rem;
          color: #7e7c7c;
          margin: 0.32rem 0 0;
        }
        .size_content {

          .size_item {
            float: left;
            margin: 0.32rem 0;
            text-align: center;
            padding: 0.15rem 0.3rem;
            color: #666;
            background: #F5F5F5;
            margin-right: 0.2rem;
            border-radius: 0.2rem;
          }
          .size_item_on {
            background: #F93943;
            color: #fff;
          }
        }
      }
      .color {
        margin-top: 0rem;
      }
    }
  }

  .buy {
    height: 1rem;
    line-height: 1rem;
    position: relative;
    padding: 0 0.2rem;
    span {

    }
    .num_wrap {
      position: absolute;
      right: 0rem;
      top: 0.1rem;
      width: 2rem;
    }
    .num_wrap span {
      position: relative;
      float: left;
      width: 0.6rem;
      height: 0.6rem;
      line-height: 30px;
      background: #f7f7f7;
      text-align: center;
      font-size: 0.3rem;
      color: #999;
    }
    .order_info .hproduct .sku span {
      color: #333;
    }
    .num_wrap input, .num_wrap span {
      position: relative;
      float: left
    }
    .num_wrap .num {
      -webkit-appearance: none;
      border-radius: 0;
      width: 0.6rem;
      height: 0.6rem;
      line-height: normal;
      border: 0;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      background: #f7f7f7;
      font-size: 12px;
      text-align: center
    }
    .num_wrap .plus {
      border-radius: 0 2px 2px 0;
    }
    .num_wrap .minus {
      border-radius: 2px 0 0 2px;
    }
  }

  .bar {
    position: fixed;
    height: 1.5rem;
    line-height:1rem;
    width: 100%;
    bottom: 0;
    text-align: center;
    button{
      height: 0.8rem;
      background: $bc2;
      border: none;
      width: 90%;
      line-height: 0.8rem;
      color: #fff;
      border-radius: 0.8rem;
    }
  }
</style>
